<template>
  <div style="width: 100%; height: 100%; position: relative;">
    <swiper ref="mySwiper" :options="swiperOptions" v-show="swiperBannerData.length>=1">
      <swiper-slide v-for="(item, i) in swiperBannerData" :index="i" :key="i"><img style="width: 100%; height: 100%;object-fit: cover;"
          :src="item" v-if="i==i"></img></swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <section class="login">
      <section class="login-logo">
        <el-image style="width: 100%; height: 100%" src="https://cfhy.oss-cn-beijing.aliyuncs.com/jpc/ui/logo1.png" fit="cover"></el-image>
      </section>
      <section  class="name1" style="text-align: center;">{{fullName}}</section>
      <section style="width: 82%;" class="container2">

    <tabs :value="curTab" @tabChange="tabChange">
      <tab :index="0" :label="'密码登录'">
        <section class="item">

          <section>
            <div style="position: relative;">
              <input  placeholder="请输入用户名" class="inputLogin  el-input__inner" v-model="username" maxlength="11"  style="margin-bottom: 5%; margin-top: 6.5%">
              </input>
              <img src="~@/assets/img/icon-test.png" style="    width: 22px;
              position: absolute;
              height: 22px;
              top: 43%;
              left: 10px;" />
            </div>
            <div style="position: relative;margin-top: 20px;">
              <input type="password" :disabled="flag" class="inputLogin  el-input__inner" placeholder="请输入密码" v-model="password"
                style="margin-bottom: 5%"></input>
              <img src="~@/assets/img/mima.png" style="width: 18px;
                                position: absolute;
                                height: 21px;
                                top: 25%;
                                left: 10px;" />


            </div>


          </section>

         <!-- <el-button type="primary" :loading="loading" class="but-primary" @click="login('1')">登录</el-button> -->
        </section>
      </tab>
      <tab :index="1" :label="'Tab2'">
        <span slot="label">验证码登录</span>
        <section class="item">
          <section>
            <div style="position: relative;">
              <input :disabled="flag" v-model="phone" class="inputLogin  el-input__inner" style="margin-bottom: 5%; margin-top: 6.5%"
                placeholder="请输入手机号">
              </input>
              <img src="~@/assets/img/shoujiha.png" style="    width: 17px;
                                position: absolute;
                                height: 21px;
                                top: 44%;
                                left: 10px;" />

            </div>

            <div style="position: relative;margin-top: 20px;" id="but">
              <input :disabled="flag" v-model="captcha" class="inputLogin  el-input__inner" style="margin-bottom: 5%" placeholder="请输入验证码"></input>
              <img src="~@/assets/img/tupianyanzheng.png" style="width: 17px;
                  position: absolute;
                  height: 21px;
                  top: 24%;
                  left: 10px;" />
              <el-button @click="send('0')" class="but2" :disabled="!show1">
                获取验证码
                <span v-show="!show1" class="count">({{ count }}s)</span>
              </el-button>
            </div>

            <section>
              <!--          <el-checkbox v-model="isRember">记住用户名</el-checkbox>
                               <el-button style="float: right; margin-top: -10px" type="text">忘记密码</el-button> -->
            </section>
          </section>

        </section>
      </tab>
    </tabs>
     <div class="checkboxs"><el-checkbox v-model="checked" v-if="curTab==0" @change="changerRember">记住用户名</el-checkbox></div>
    <div class="loginBut">
      <el-button type="primary" :loading="loading" class="but-primary" @click="login(curTab+1)">登录</el-button>
    </div>

<!--        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="密码登录" name="first">
            <section class="item">

              <section>
                <div style="position: relative;">

                  <el-input :disabled="flag" placeholder="请输入用户名" class="inputLogin" v-model="username" style="margin-bottom: 5%; margin-top: 6.5%">
                  </el-input>


                  <img src="~@/assets/img/icon-test.png" style="    width: 22px;
                  position: absolute;
                  height: 22px;
                  top: 43%;
                  left: 10px;" />
                </div>
                <div style="position: relative;margin-top: 20px;">
                  <el-input type="password" :disabled="flag" class="inputLogin" placeholder="请输入密码" v-model="password"
                    style="margin-bottom: 5%"></el-input>
                  <img src="~@/assets/img/mima.png" style="width: 18px;
                                    position: absolute;
                                    height: 21px;
                                    top: 25%;
                                    left: 10px;" />

                </div>


              </section>

              <el-button type="primary" :loading="loading" class="but-primary" @click="login('1')">登录</el-button>
            </section>
          </el-tab-pane>
          <el-tab-pane label="验证码登录" name="second">
            <section class="item">
              <section>
                <div style="position: relative;">
                  <el-input :disabled="flag" v-model="phone" class="inputLogin" style="margin-bottom: 5%; margin-top: 6.5%"
                    placeholder="请输入手机号">
                  </el-input>
                  <img src="~@/assets/img/shoujiha.png" style="    width: 17px;
                                    position: absolute;
                                    height: 21px;
                                    top: 44%;
                                    left: 10px;" />

                </div>

                <div style="position: relative;margin-top: 20px;" id="but">
                  <el-input :disabled="flag" v-model="captcha" class="inputLogin" style="margin-bottom: 5%" placeholder="请输入验证码"></el-input>
                  <img src="~@/assets/img/tupianyanzheng.png" style="width: 17px;
                      position: absolute;
                      height: 21px;
                      top: 24%;
                      left: 10px;" />
                  <el-button @click="send('0')" class="but2" :disabled="!show1">
                    获取验证码
                    <span v-show="!show1" class="count">({{ count }}s)</span>
                  </el-button>
                </div>

                <section>

                </section>
              </section>
              <el-button type="primary" :loading="loading" class="but-primary" @click="login('2')">登录</el-button>
            </section>

          </el-tab-pane>
        </el-tabs> -->
        <section class="rest" @click="toRen">重新认证企业
        </section>

      </section>

    </section>
    <section style="position: fixed;width: 233px;bottom: 20px;z-index: 3;text-align: center;right: 0;margin: auto;left: 0;line-height: 40px;
    color: #999999;">
      <span style="padding-right: 56px;">帮助</span>
      <span style="padding-right: 56px;">隐私</span>
      <span>条款</span>
      <section>
        copyright©成丰货运
      </section>
    </section>
    <el-dialog title="选择帐套" :visible.sync="innerVisible" class="addForm-wrapper" label-width="93px" append-to-body>
      <el-select clearable v-model="tenantBookId" style="margin-bottom: 3%">
        <el-option v-for="item in tenantbookList" :key="item.id" :label="item.names" :value="item.id">
        </el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmTenantbookList()" v-noMoreClick>确定</el-button>
        <el-button size="small" @click="close()">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改初始密码" class="addForm-wrapper" :visible.sync="updatePwdVisible" append-to-body>

      <el-form label-width="93px" ref="form" :model="editForm">
        <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
        <el-form-item label="手机号:" prop="phone" :rules="[
                  {required: true, message:'请选择输入手机号', trigger:'blur'}
                 ]">
          <el-input class="inputAppend-wrapper inputBox" v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item style="position: relative;" label="验证码:" prop='captcha' :rules="[
                  {required: true, message:'请输入验证码', trigger:'blur'},
                  {validator: validator.isDigits, trigger:'blur'}
                 ]">
          <el-input class="inputAppend-wrapper inputBox" v-model="editForm.captcha"></el-input>
          <el-button @click="send('3')" type="primary" :disabled="!show" style="position: absolute;right: 36px;padding-left: 5px;padding-right: 5px;">
            获取验证码
            <span v-show="!show" class="count">({{ count }}s)</span>
          </el-button>
        </el-form-item>
        <el-form-item label="新密码:" prop='password' :rules="[
                  {required: true, message:'请输入密码', trigger:'blur'},
                  {validator: validator.isPwd, message:'以字母开头，长度在6-12之间，只能包含字符、数字和下划线。', trigger:'blur'}

                 ]">
          <el-input class="inputAppend-wrapper inputBox" v-model="editForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="updatePwd()" v-noMoreClick>确定</el-button>
        <el-button size="small" @click="updatePwdClose()">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="limitedVisible" class="limit-wrapper" label-width="93px"
      append-to-body>
      <div style="width: 473px;height: 190px;">
        <div style="width: 134px;font-size: 22px;color: #e8423f;margin: 0 auto; margin-top: 12px;">
          <img src="~@/assets/img/ku.png" style="width: 28px;height: 28px;">
          访问受限
        </div>
        <div style="font-size: 16px;line-height: 50px;margin-top: 20px;text-align: center;color: #666666;">
          理由：该设备或者网络环境不允许访问平台。
        </div>
        <div style="font-size: 16px;margin-top: 0px; text-align: center;color: #666666;">

          如有需要，可以联系客服人员。客服电话：400-888-888
        </div>

      </div>


    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
	import tabs from '@/components/tabs/tabs'
	import tab from '@/components/tabs/tab'
  import {
    Message,
    Loading
  } from 'element-ui'
  // import http from '@/utils/httpRequest'
  import {
    isNull
  } from "@/utils/validate"
  import {
    getTenantBookList,
    login,
    updatePwd,
    sendCaptcha,
    isLogin
  } from "@/api/sys/login.js";
  import {
    setLocalStorage,
    getLocalStorage
  } from "@/utils/localstore.js"

  const TIME_COUNT = 60; //更改倒计时时间
  export default {
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
	components:{
		tabs,
		tab
	},

    data() {
      return {
        loading: false,
        swiperBannerData: ["https://cfhy.oss-cn-beijing.aliyuncs.com/jpc/ui/login3.png",
          "https://cfhy.oss-cn-beijing.aliyuncs.com/jpc/ui/login3.png"
        ],
        checked:false,
         curTab: 0 ,// 当前激活的tab索引
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          direction: 'horizontal',
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          loop: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
            waitForTransition: false
          },

          // Some Swiper option/callback...
        },
        flag: false,
        fullName: '',
        token: '',
        refreshToken: '',
        show: true, // 初始启用修改密码发送按钮
        show1: true, // 初始启用登录发送按钮
        count: '', // 初始化次数
        innerVisible: false,
        limitedVisible: false,
        updatePwdVisible: false,
        tenantBookId: '',
        username: "",
        password: "",
        phone: "",
        captcha: "",
        url: "",
        isRember: false,
        editForm: {
          phone: '',
          captcha: '',
          password: ''
        },
        tenantbookList: [],
        activeName: "first",
        rules: {
          username: [{
            required: true,
            message: "帐号不能为空",
            trigger: "blur"
          }, ],
          password: [{
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }, ],
          captcha: [{
            required: true,
            message: "验证码不能为空",
            trigger: "blur"
          }, ],
        },
      };
    },
    created() {},
    mounted() {
      if(Vue.cookie.get('checked1')=='1'){
        this.checked=true
      }else{
        this.checked=false
      }
      this.username=Vue.cookie.get('username1')
      this.password=Vue.cookie.get('password1')
      console.log(this.username)
      console.log(this.password)
      this.$nextTick(() => {
        sessionStorage.removeItem('configFlag')
        this.fullName = getLocalStorage('fullName')
        if(isNull(this.fullName) || isNull(getLocalStorage('tenantCode'))) {
          this.$router.push({
            path: '/login2'
          })
          this.$Msg.info({
          	title:"当前企业已注销",
          	content:"登录其他企业需要管理员认证",
          	showConfirm:true
          })
          return
        }
        console.log(this.fullName)
        isLogin({
          tenantCode: getLocalStorage('tenantCode'),
          isAdminUser: getLocalStorage('isAdminUser')
        }).then((res) => {
          if (res.data.result.isLogin) { // 访问受限
            this.flag = true
            this.limitedVisible = true

            // this.$Msg.warning({
            //     title: '访问受限',
            //     content: "需要管理员认证",
            //     autoClose: false
            // })
          }
        })

      })

    },
    methods: {
      ss(e){
        console.log(e)
      },
      tabChange(index) {
        this.curTab = index
        console.log(this.curTab)
      },
      changerRember(e){
        console.log(e)
        if(e){
          Vue.cookie.set('password1',this.password)
          Vue.cookie.set('username1',this.username)
          Vue.cookie.set('checked1',1)
        this.username=Vue.cookie.get('username1')
        this.password=Vue.cookie.get('password1')
        }else{
          Vue.cookie.set('checked1',0)
          Vue.cookie.set('password1','')
          Vue.cookie.set('username1','')
        }

      },
      toRen() {
        // setLocalStorage('tenantCode','')
        this.$Msg.confirm({
          title: '您确定要注销当前企业吗？',
          content: "须注销当前企业信息后，才可以切换到其他企业。</br>注销后再次登录本企业时需要管理员重新认证",
          confirmTxt: "是的",
          cancelTxt: "再想想",
          dialogWidth: "460px",
          confirmCall: () => {
            localStorage.removeItem('tenantCode');
            console.log(localStorage.removeItem('tenantCode'))
            this.$router.push({
              path: '/login2'
            })
          },
          cancelCall: () => {
            console.log("取消回调")
          }
        })

        console.log(getLocalStorage('tenantCode'))
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      close2() {
        this.innerVisible2 = false
      },
      close() {
        this.innerVisible = false
      },
      confirmTenantbookList() {
        for (let i = 0; i < this.tenantBookList.length; i++) {
          const tenantBookListElement = this.tenantBookList[i];
          if (tenantBookListElement.id === this.tenantBookId) {
            this.setToken();
            setLocalStorage('bookDbName', tenantBookListElement.bookDbName)
          }
        }
      },
      updatePwdClose() {
        this.updatePwdVisible = false
      },
      // 发送验证码
      send(captchaTemplate) {
        if (captchaTemplate === '0') {
          if (!this.phone) {
            this.$Msg.error({
              title: '验证失败',
              content: "理由：手机号不能为空",
              autoClose: true
            });
          }
          if (this.phone && (!(/^[1][34578]\d{9}$/).test(this.phone) || !(/^[1-9]\d*$/).test(this.phone) ||
              this.phone.length !== 11)) {
            this.$Msg.error({
              title: '验证失败',
              content: "理由：手机号码不符合规范",
              autoClose: true
            })
          }
        } else if (captchaTemplate === '3') {
          if (!this.editForm.phone) {
            this.$Msg.error({
              title: '验证失败',
              content: "理由：手机号不能为空",
              autoClose: true
            });
          }
          if (this.editForm.phone && (!(/^[1][34578]\d{9}$/).test(this.editForm.phone) || !(/^[1-9]\d*$/).test(
              this.editForm.phone) || this.editForm.phone.length !== 11)) {
            this.$Msg.error({
              title: '验证失败',
              content: "理由：手机号码不符合规范",
              autoClose: true
            })
          }
        }
        sendCaptcha({
          phone: captchaTemplate === '0' ? this.phone : this.editForm.phone,
          captchaTemplate: captchaTemplate
        }).then((res) => {
          if (res.data.code === '200') {
            this.$Msg.success({
              title: '成功',
              content: "发送成功",
              autoClose: true,
              duration:2
            })
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer); // 清除定时器
                  this.timer = null;
                }
              }, 1000)
            }
          }
          this.loading = false;
        });

      },
      // 更新密码
      updatePwd() {
        if (this.editForm.phone || this.editForm.phone) {
          if (this.phone && (!(/^[1][34578]\d{9}$/).test(this.phone) || !(/^[1-9]\d*$/).test(this.phone) ||
              this.phone.length !== 11)) {
            this.$Msg.error({
              title: '验证失败',
              content: "理由：手机号码不符合规范",
              autoClose: true
            })
          } else {
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer); // 清除定时器
                  this.timer = null;
                }
              }, 1000)
            }
            updatePwd({
              phone: this.editForm.phone,
              captcha: this.editForm.captcha,
              password: this.editForm.password
            }).then((res) => {
              console.log(res)
              if (res.data.code === '200') {
                this.$Msg.success({
                  title: '成功',
                  content: "修改成功，请重新登录",
                  autoClose: true
                })
              }
              this.loading = false;
              this.innerVisible = false;
              this.updatePwdVisible = false;
            });
          }
        } else {
          this.$Msg.error({
            title: '验证失败',
            content: "理由：手机号或验证码不能为空",
            autoClose: true
          })
        }

      },
      // 登陆
      login(loginMode) {
        var temUser = this.username;
        if (loginMode == '1') {
          if (this.username === '' || this.password === '') {
            this.$Msg.error({
              title: '失败',
              content: "理由：用户名或密码不能为空",
              autoClose: true
            });
            return
          }
        } else if (loginMode == '2') {
          if (this.phone === '' || this.captcha === '') {
            temUser = this.phone
            this.$Msg.error({
              title: '失败',
              content: "理由：手机号或验证码不能为空",
              autoClose: true
            });
            return
          }

        }
        this.loading = true
        login({
          loginMode: loginMode,
          username: temUser,
          password: this.password,
          phone: this.phone,
          captcha: this.captcha
        }).then((res) => {
          console.log(res)
          if(this.checked){
            Vue.cookie.set('password1',this.password)
            Vue.cookie.set('username1',this.username)
          }else{
             Vue.cookie.set('password1','')
             Vue.cookie.set('username1','')
          }
          if (res.data.code === '200') {
            // 保存访问日志
            this.$http({
              url: '/acess/log/saveAccessLog',
              method: 'POST',
              headers: {'Content-Type': 'application/json; charset=utf-8'},
              data: {
                'userAccount': temUser
              }
            }).then(({data}) => {
              if (data && data.success) {
              }
            })
            this.token = res.data.result.token;
            this.refreshToken = res.data.result.refreshToken
            this.tenantBookList = res.data.result.tenantBookList
            if (res.data.result.tenantBookList.length > 1) {
              this.innerVisible = true;
            } else if (res.data.result.tenantBookList.length == 1) {
              this.setToken();
              setLocalStorage('bookDbName', res.data.result.tenantBookList[0].databaseName)
            }
          } else if (res.data.code === 'E0003') {
            this.updatePwdVisible = true
            // this.getCaptcha()
          }else{
            Message({
              message: res.data.message,
              type: 'error',
              showClose: true,
              customClass: 'zZindex'
            })

          }
          if(!res.data.success){
            this.loading = false;
          }
        });

      },
      getTime() {
        this.time = this.moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      },
      setToken() {
        this.$cookie.set('token', this.token);
        this.$cookie.set('refreshToken', this.refreshToken);
        this.$router.push({
          name: 'home'
        });
        // this.$http({
        //   url: '/transfer/dataTransfer',
        //   method: 'get'
        // })
      },
      // 获取验证码
      getCaptcha() {
        this.captchaPath = this.$http.BASE_URL + `/captcha.jpg`;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .swiper-container {
    width: 100%;
    height: 100%;
  }
.name1{
  text-align: center;font-size: 22px;color: #333333;
}
  .but-primary {
    height: 50px;
    width: 100%;
    background-color: #1890ff;
    margin-top: 10%;
    text-align: center;
    border-radius: 6px;
    border-radius: 6px;
    line-height: 26px;
    cursor: pointer;
    font-size: 18px;
    color: #FFFFFF;

  }
  .checkboxs{
    position: absolute;
  }
  .loginBut{
    width: 100%;

  }

  .rest {
    text-align: center;
    margin-top: 45px;
    font-size: 16px;
    color: #1890FF;
    cursor: pointer
  }

  ::v-deep .el-tabs__item.is-top:nth-child(2) {
    padding-left: 40px !important;
    // width: 120px !important;
  }

  ::v-deep .el-tabs__active-bar {
    background-color: #1890FF !important;
  }


  .inputLogin {

    border: 1px solid #EEEEEE;
    box-shadow: 0px 0px 8px 0px rgba(35, 24, 21, 0.1);
    border-radius: 10px;
  }

  ::v-deep .swiper-pagination-bullet-active {
    background: #FFFFFF;

  }


  ::v-deep .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    opacity: .2;
  }

  ::v-deep .swiper-pagination {
    text-align: left;
    left: 120px !important;
    bottom: 50px !important;

  }

  .limit-wrapper ::v-deep .el-dialog .el-dialog__header {
    display: none;
  }

  .limit-wrapper ::v-deep .el-dialog__body {
    padding: 50px 30px 0 !important;
    padding-bottom: 0 !important;
  }

  ::v-deep .el-form {
    .el-input__inner {

      padding-left: 10px;
      width: 320px;
    }

  }

  .container2 {
    margin: 0 auto;
    margin-top: 30px;
  }

  ::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
  }


  .but2 {
    position: absolute;
    // top: 64.4%;
    right: 0px;
    top: 0px;


  }

  ::v-deep .el-button {
    color: #999999;
    height: 60px;
    // border: 1px solid #999999;
  }


  ::v-deep .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    margin-left: 0px;
    margin-left: 40px;
  }

  ::v-deep .el-tabs__item {
    padding: 0 40px;
    font-size: 23px;
  }

  .login-cointer {
    overflow-y: hidden !important;
    width: 75%;
    height: 100vh;
    position: relative;

    .title {
      font-size: 119px;
      width: 400px;
      color: #ffffff;
      position: absolute;
      top: 33.7%;
      left: 10.2%;
    }

    .login-item {
      width: 25%;
      min-width: 624px !important;
      height: 72.7%;
      position: absolute;
      min-width: 420px;
      min-height: 580px;
      top: 10.52%;
      left: 16%;
    }
  }

  .login {
    width: 31.25%;
    height: 74.6%;
    background: #ffffff;
    min-width: 600px;
    min-height: 580px;
    position: fixed;
    z-index: 3;
    top: 12.75%;
    right: 116px;
    border-radius: 10px;

    .login-logo {
      width: 124px;
      height: 65px;
      margin: 0 auto;
      margin-top: 64px;
      margin-bottom: 4.2%;
    }

    .item {
      //   position: absolute;
      width: 100%;
    }
  }

  ::v-deep .el-input__inner {
    height: 60px !important;
    padding-left: 46px;
  }

  @media screen and (min-width: 0) and (max-width: 1866px) {
    .checkboxs{
        position: absolute;
        left: 33px;
        /* top: 10px; */
        margin-top: -4px;
    }
    .loginBut{
      width: 100%;
      padding: 0 15px;
    }
    .inputLogin {

      border: 1px solid #EEEEEE;
      box-shadow: 0px 0px 0px 0px #FFFFFF;
      border-radius: 8px;
    }
    ::v-deep .tab{
      font-size: 20px;
    }
    .name1{
      font-size: 20px;color: #333333;font-weight: 500;
      margin-top: -10px;
    }
    ::v-deep .tab:first-child{
  display: inline-block;
  font-size: 20px;
  padding: 0 -10px 0 0;
  height: 40px;
  line-height: 38px;
  position: relative;
  bottom: -2px;
  cursor: pointer;
  margin-right: 85px;
  margin-left: 30px;
  border-bottom: 2px solid rgba(255,255,255,0);
  &.active {
    color: #1890FF;

    border-bottom: 2px solid #1890FF;
  }

}

    .login {
      width: 31.25%;
      height: 65.6%;
      background: #ffffff;
      min-width: 440px;
      position: fixed;
      z-index: 99;
      top: 8%;
      right: 116px;
      min-height: 550px;
      border-radius: 10px;

      .container2 {
        margin: 0 auto;
        min-width: 413px;
        margin-top: 0px;
        margin-top: 0px;

      }

      .login-logo {
        width: 124px;
        height: 65px;
        margin: 0 auto;
        margin-top: 34px;
        margin-bottom: 4.2%;
      }

      .item {
        //   position: absolute;
        width: 376px;
        margin: 0 auto;
      }
    }

    ::v-deep .el-input__inner {
      height: 48px !important;
      font-size: 16px;
      border: 1px solid #DCDFE6 !important;
      padding-left: 46px;
    }

    // ::v-deep .el-tabs__item {
    //   padding: 0 40px;
    //   font-size: 21px;
    // }

    ::v-deep .el-button {
      color: #999999;
      height: 48px;
    }

    .but-primary {
      height: 46px !important;
      width: 100%;
      background-color: #1890ff;
      margin-top: 8%;

      text-align: center;
      border-radius: 6px;
      border-radius: 6px;
      line-height: 22px;
      cursor: pointer;
      font-size: 18px;
      color: #FFFFFF;

    }
    .rest {
      text-align: center;
      margin-top: 31px;
      font-size: 16px;
      color: #1890FF;
      cursor: pointer
    }

  }
   @media screen and (min-width: 0) {

   }


  ::v-deep .el-input__inner {
    height: 60px;
    font-size: 16px;
     border: 1px solid #DCDFE6 !important;
  }
  // #but{
  .el-button.but2:focus,
  .el-button.but2:hover {
    color: #1890FF !important;
    border-color: #badeff !important;
    background-color: #e8f4ff !important;
  }

  ::v-deep .el-button--primary {
    color: #FFF;
    background-color: #1890FF !important;
    border-color: #1890FF !important;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #1890FF;
  }

  ::v-deep .el-tabs__item:hover {
    color: #1890FF;
    cursor: pointer;
  }

  // }
</style>
